<template>
    <div class="wrapper">
        <v-head></v-head>
        <v-sidebar></v-sidebar>
        <div class="content-tab" style="padding:0px;">
            <el-tabs v-model="editableTabsValue2" type="card" closable @tab-remove="removeTab" @tab-click="changeTab">
                <el-tab-pane
                    v-for="(item, index) in editableTabs2"
                    :key="item.name"
                    :label="item.title"
                    :name="item.name"
                >
                    <keep-alive>
                        <router-view></router-view>
                    </keep-alive>
                </el-tab-pane>
            </el-tabs>
        </div>
        <!--<div class="content">
            <transition name="move" mode="out-in"><router-view></router-view></transition>
        </div>-->
    </div>
</template>

<script>
    import vHead from './Header.vue';
    import vSidebar from './Sidebar.vue';
    import vContent from './Content.vue';
    export default {
        data() {
            return {
                editableTabsValue2: '0',
                editableTabs2: [],
                tabIndex: 0
            }
        },
        components:{
            vHead, vSidebar,vContent
        },
        methods:{
            addTab(targetName,url) {
                var hasItem = false;
                this.editableTabs2.forEach(function(item){
                    if(url == item.name){
                        hasItem = true;
                    }
                });
                if(hasItem){
                    this.editableTabsValue2 = url;
                    return;
                }
                this.editableTabs2.push({
                    title: targetName,
                    name: url,
                    content: ''
                });
                this.editableTabsValue2 = url;
            },
            removeTab(targetName) {
                let tabs = this.editableTabs2;
                let activeName = this.editableTabsValue2;
                if (activeName === targetName) {
                    tabs.forEach((tab, index) => {
                        if (tab.name === targetName) {
                            let nextTab = tabs[index + 1] || tabs[index - 1];
                            if (nextTab) {
                                activeName = nextTab.name;
                            }
                        }
                    });
                }

                this.editableTabsValue2 = activeName;
                this.editableTabs2 = tabs.filter(tab => tab.name !== targetName);
            },
            changeTab(tab){
                this.$router.push(tab.name);
            }

        }
    }
</script>
